<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Process Info Display</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 5px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Process Information</h1>
    <table id="processTable">
        <tr>
            <th>Start Time</th>
            <th>PID</th>
            <th>Name</th>
        </tr>
        <!-- Table rows will be added dynamically here -->
    </table>

    <script>
        const MAX_REFRESHES = 10; // 配置刷新次数
        let refreshCount = 0; // 记录刷新次数

        function fetchProcessInfo() {
            fetch('http://127.0.0.1:5000/get_process_info')
            .then(response => response.json())
            .then(data => {
                const table = document.getElementById('processTable');
                const row = table.insertRow(-1); // 在表格末尾插入新行
                const startTimeCell = row.insertCell(0);
                const pidCell = row.insertCell(1);
                const nameCell = row.insertCell(2);
                
                startTimeCell.textContent = data.start_time;
                pidCell.textContent = data.pid;
                nameCell.textContent = data.name;
            })
            .catch(error => {
                console.error('Error fetching process info:', error);
                // 在表格中显示错误信息
                const table = document.getElementById('processTable');
                const row = table.insertRow(-1);
                const cell = row.insertCell(0);
                cell.colSpan = 3; // 跨三列
                cell.textContent = 'Failed to fetch process info.';
            });
        }

        // 每10秒刷新一次
        setInterval(fetchProcessInfo, 10000);

        // 初始化刷新计数器
        let intervalId = setInterval(() => {
            refreshCount++;
            if (refreshCount >= MAX_REFRESHES) {
                clearInterval(intervalId); // 停止刷新
            }
        }, 10000);

        // 页面加载时获取一次数据
        window.onload = fetchProcessInfo;
    </script>
</body>
</html>